<template>
  <div class="cjui-audio-player">
    <audio 
      ref="audioRef"
      controls
      :loop="loop" 
      :muted="muted" 
      :preload="preload" 
      @loadedmetadata="onLoadedmetadata"
      @timeupdate="onTimeupdate"
      @play="audioState.playing = true"
      @pause="audioState.playing = false"
      >
      <template v-if="typeof src === 'array'" >
        <source v-for="(item, i) in src" :src="item.src" :type="item.type" :key="i">
      </template>

      <template v-else>
        <source :src="src">
      </template>

      <p>你的浏览器不支持 HTML5 音频。可点击<a :href="src">此链接</a>观看</p>
    </audio>
    
    <div class="player-container">
      <div class="player-header">
        <!-- <IconMusicPlaying /> -->
      </div>

      <div class="player-body">
        <p>
          <el-icon @click="downloadAudio"><Download /></el-icon>
          <!-- <el-icon @click="toggleMenuShow"><Fold /></el-icon> -->
        </p>

        <p>
          <!-- <IconVoiceSwitch :checked="!audioState.volumeDisable" @change="volumeDisableChange" /> -->
          <el-slider v-model="audioState.volumeValue" :show-tooltip="false" :disabled="audioState.volumeDisable" @change="changeVolumeValue"></el-slider>
          <el-icon @click="prevClick"><ArrowLeft /></el-icon>
          <el-icon v-show="!audioState.playing" @click="play"><VideoPlay /></el-icon>
          <el-icon v-show="audioState.playing" @click="pause"><VideoPause /></el-icon>
          <el-icon @click="nextClick"><ArrowRight /></el-icon>
          <el-icon @click="refresh"><Refresh /></el-icon>
          <span class="playbackRate" @click="changePlaybackRate">x{{ audioState.playbackRate }}</span>
        </p>

        
        <p>
          <span>{{ formatSecond(audioState.currentTime) }}</span>
          <span>{{ formatSecond(audioState.maxTime) }}</span>
        </p>
      </div>
    </div>
    
    <div class="player-progress">
      <el-slider v-model="audioState.timeProgress" :show-tooltip="false" @change="changeCurrentTime"></el-slider>
    </div>
    
    <div class="player-menu" :class="[menuShow ? 'menu-show' : '']">
      <!-- <ul>
        <li v-for="(item, i) in audioList" :key="i">
          {{ item.name }}
          <i class="el-icon-close"></i>
        </li>
      </ul>
      <i class="el-icon-delete" @click="clearList"></i> -->
      <!-- <el-icon><Delete /></el-icon> -->
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref } from 'vue';
import { Download, Fold, ArrowLeft, VideoPlay, VideoPause, ArrowRight, Refresh, Delete } from '@element-plus/icons-vue';
// import { IconMusicPlaying, IconVoiceSwitch } from '../../icon/index';
import { formatSecond } from './js/utils';

const props = defineProps({
  autoPlay: {
    type: Boolean,
    default: false
  },
  src: {
    type: [String, Array],
    default: ''
  },
  loop: {
    type: Boolean,
    default: false
  },
  muted: {
    type: Boolean,
    default: false
  },
  preload: {
    type: String,
    default: 'auto'
  },
});

const emits = defineEmits<{
  prevClick: [];
  nextClick: [];
}>()

const audioRef = ref(null);

const audioState = reactive({
  playing: false, // 当前播放状态
  playbackRate: 1,  // 当前播放速度
  playbackRateList: [0.5, 1, 1.5, 2],  // 播放速度枚举
  currentTime: 0, // 当前播放时长
  maxTime: 0, // 最大播放时长
  volumeValue: 100, // 音量值
  volumeDisable: false, // 音量状态
  timeProgress: 0, // 进度
});

function onLoadedmetadata(res) {  // 获取音频播放最大时间
  audioState.maxTime = Math.round(res.target.duration);
}
function onTimeupdate(res) {  // // 更新音频播放流的当前时间
  audioState.currentTime = parseInt(res.target.currentTime);
  audioState.timeProgress = parseInt((audioState.currentTime / audioState.maxTime) * 100);
}

function play() {  // 播放   
  audioState.playing = true;
  audioRef.value.play();
}
function pause() {  // 暂停
  audioState.playing = false;
  audioRef.value.pause();
}
function volumeDisableChange(res) {   // 打开 | 关闭声音
  console.log({ audioRef: audioRef.value })
  if (res) {
    audioState.volumeDisable = false;
    audioRef.value.volume = audioState.volumeValue / 100;

  } else {
    audioState.volumeDisable = true;
    audioRef.value.volume = 0;
  }
}
function changeVolumeValue(value) {  // 调整音量
  audioRef.value.volume = value / 100;
}
function prevClick() {  // 播放下一首
  emits('prevClick');
}
function nextClick() {  // 播放下一首
  emits('nextClick');
}
function refresh() {  // 播放刷新
  audioRef.value.currentTime = 0;
  audioState.timeProgress = 0;
  play();
}
function changeCurrentTime(value) {  // 拖动进度条改变当前时间
  audioRef.value.currentTime = parseInt((value * audioState.maxTime) / 100);
  play();
}
function changePlaybackRate(evt) {  // 改变当前播放速度
  const playbackRateIndex = audioState.playbackRateList.findIndex(el => el === audioState.playbackRate);
  if (playbackRateIndex > -1) {
    audioState.playbackRate = audioState.playbackRateList[(playbackRateIndex + 1) % audioState.playbackRateList.length];

  } else {
    audioState.playbackRate = 1;
  }
  
  audioRef.value.playbackRate = audioState.playbackRate;
}

function downloadAudio() {
  window.open(props.src);
}

const menuShow = ref(false);
function toggleMenuShow() {
  menuShow.value = !menuShow.value;
}
</script>

<style lang="scss">
.cjui-audio-player {
  audio {
    width: 0;
    height: 0;
    visibility: hidden;
  }
}

.cjui-audio-player .player-container {
  width: 480px;
  height: 100px;
  background: rgba(19, 5, 25, 0.87);
  display: flex;

  .player-header {
    width: 100px;
    height: 100%;

    .cjui-icon--music-playing {
      width: 76%;
      height: 76%;
      margin: 12%;
    }
  }

  .player-body {
    height: 100%;
    flex: 1;
    color: #00d4b8;

    p {
      margin-bottom: 0;
    }

    i {
      vertical-align: middle;
      cursor: pointer;

      &:hover {
        color: #1ff3d7;
      }
    }

    p:first-child {
      text-align: right;
      margin: 0.4em 1em 0;

      i {
        font-size: 18px;
        margin-left: 0.5em;
      }
    }
    
    p:nth-child(2) {
      padding: 0 1em;

      i {
        font-size: 20px;
        margin: 0 0.4em;
      }

      .playbackRate {
        font-size: 18px;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        vertical-align: middle;
        margin-left: 0.5em;
        cursor: pointer;
      }
    }

    p:last-child {
      display: flex;
      justify-content: space-between;
      padding: 0 1em;
    }

    .cjui-icon {
      display: inline;
      vertical-align: middle;
    }

    .cjui-icon--voice-switch {
      margin-bottom: 0;

      svg {
        display: inline-block;
        width: 24px;
        height: 24px;
      }
    }

    .el-slider {
      width: 100px;
      display: inline-block;
      vertical-align: middle;
      margin: 0 1em 5px;
      padding-top: 14px;
    }
  }
}

.cjui-audio-player .player-progress {
  width: 480px;

  .el-slider {
    margin-top: -1em;
  }
}

.cjui-audio-player .player-menu {
  width: 480px;
  height: 0px;
  overflow: auto;
  background: #17091c;
  margin-top: -1em;
  transition: all 0.3s ease-out;
  overflow: hidden;

  &.menu-show {
    height: 150px;
  }
  
  i {
    color: #00d4b8;
    float: right;
    margin-bottom: 1em;
    margin-right: 1em;
    cursor: pointer;
  }

  ul {
    padding: 0.5em 1em;
    margin-bottom: 0;
  }

  li {
    color: #00d4b8;
    padding: 0.4em 1em;
    background: #333;
    margin-bottom: 0.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.cjui-audio-player .el-slider {
  .el-slider__runway {
    background-color: #464646;
  }

  .el-slider__bar {
    background-color: #00d4b8;
  }

  .el-slider__button {
    border-color: #00d4b8;
  }
}
</style>
